<template>
  <avue-form :option="option"
             v-model="form">
    <template #code-type="{item,value,label}">
      <span>{{ item }}</span>
    </template>
  </avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: '单选',
          prop: 'code',
          type: 'tree',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `${baseUrl}/getProvince`,
          typeformat (item, label, value) {
            return `值:${item[label]}-名:${item[value]}`
          },
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }, {
          label: '多选',
          prop: 'codes',
          type: 'tree',
          props: {
            label: 'name',
            value: 'code'
          },
          multiple: true,
          dicUrl: `${baseUrl}/getProvince`,
          typeformat (item, label, value) {
            return `值:${item[label]}-名:${item[value]}`
          },
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }
        ]
      }
    }
  }
}
</script>